<template>
  <el-card>
    <el-row>
      <el-table :data="tableList" :border="true" :height="500"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }">
        <el-table-column prop="userName" label="用户名" width="80" />
        <el-table-column prop="nickName" label="昵称" width="100" />
        <el-table-column prop="tokenId" label="TokenId" width="200" />
        <el-table-column prop="connectionId" label="会话ID" width="200" />
        <el-table-column prop="requestIp" label="IP" width="100" />
        <el-table-column prop="ipAddress" label="IP归属地" />
        <el-table-column prop="operatingSystem" label="操作系统" width="100" />
        <el-table-column prop="deviceType" label="设备类型" width="100" />
        <el-table-column prop="browserName" label="浏览器名称" width="120" />
        <el-table-column prop="version" label="浏览器版本" width="100" />
        <el-table-column prop="loginTime" label="登录时间" width="130" />
        <el-table-column prop="accessExpiresTime" label="下次刷新登录时间" width="130" />
        <el-table-column prop="refreshExpiresTime" label="登录过期时间" width="130" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="danger" :icon="Delete" @click="logout(scope.row.tokenId)"
              v-button="['api:monitor:online:logout']">
              强退
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <el-row>
      <Pagination :total="search.total" v-model:pageIndex="search.pageIndex" v-model:pageSize="search.pageSize"
        @change="query()"></Pagination>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import { Delete } from "@element-plus/icons-vue";
import OnlineUserApi, { OnlineUser, OnlineUserQuery } from "@/api/monitor/onlineUser";
import successMsg from "@/utils/successMsg";
defineOptions({
  name: "onlineuser",
  inherititems: false,
});
const tableList = ref<OnlineUser[]>();

//查询条件
const search = reactive<OnlineUserQuery>({
  total: 0,
  pageIndex: 1, //第几页
  pageSize: 10, //每页多少条
});

onMounted(async () => {
  await query();
});

const query = async () => {
  const { dataList, totalCount } = await OnlineUserApi.query(search);
  tableList.value = dataList;
  search.total = totalCount;
};

const logout = async (tokenId: string) => {
  const { success, message } = await OnlineUserApi.logout(tokenId);
  successMsg(success, message, async () => {
    await query();
  });
};
</script>
@/api/monitor/onlineUser
